<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 个人中心 开发者: 麦沃德科技-半夏  
+---------------------------------------------------------------------- -->

<template>
	<view class="container" :style="{'--theme-color': themeColor}">
		<!-- 标题栏 -->
		<title-bar title="个人中心" :backgroundColor="titleBackground"></title-bar>
		<!-- 顶部背景 -->
		<view class="container-bg"></view>
		<!-- 页面内容 -->
		<view class="container-main">
			<!-- 用户信息 -->
			<user-info></user-info>
			<!-- 行程订单 -->
			<view class="main-column">
				<view class="column-title">行程订单</view>
				<view class="column-box" style="margin-top: 32rpx;">
					<menu-order :show-data="orderMenu || []"></menu-order>
				</view>
			</view>
			<!-- 我的服务 -->
			<view class="main-column" style="padding-bottom: 0;">
				<view class="column-title">我的服务</view>
				<view class="column-box" style="padding: 16rpx 0;">
					<menu-system :show-data="systemMenu || []"></menu-system>
				</view>
			</view>
			<!-- 切换代驾端 -->
			<view class="main-switch" @click="toDriverModule()">
				<image class="switch-bg" src="/static/switch_bg.png" mode="aspectFill"></image>
				<view class="switch-title">切换代驾端</view>
				<view class="switch-subtitle">成为代驾师傅可进行接单</view>
			</view>
			<!-- 备案号 -->
			<view class="main-statement" v-if="statement">备案号：{{statement}}</view>
		</view>
		<!-- 底部导航 -->
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import svgData from "@/common/svg.js"
	import titleBar from "@/pages/component/title-bar/title-bar.vue"
	import userInfo from "@/pages/passenger/component/user-info/user-info.vue"
	import menuOrder from "@/pages/component/menu/order.vue"
	import menuSystem from "@/pages/component/menu/tool.vue"
	import tabBar from "@/pages/component/tab-bar/tab-bar.vue"
	export default {
		components: {
			titleBar,
			userInfo,
			menuOrder,
			menuSystem,
			tabBar,
		},
		data() {
			return {
				// 标题栏背景颜色
				titleBackground: "transparent",
			}
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				token: state => state.user.token,
				statement: state => state.app.statement,
				shareTitle: state => state.app.shareTitle,
				shareImage: state => state.app.shareImage,
				orderMenu: state => {
					return [{
							id: 1,
							icon: svgData.svgToUrl("order_1", state.app.themeColor),
							text: "待接单",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/order/index?state=pending",
								isToken: true,
							},
						},
						{
							id: 2,
							icon: svgData.svgToUrl("order_2", state.app.themeColor),
							text: "行程中",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/order/index?state=in_progress",
								isToken: true,
							},
						},
						{
							id: 3,
							icon: svgData.svgToUrl("order_3", state.app.themeColor),
							text: "已完成",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/order/index?state=completed",
								isToken: true,
							},
						},
						{
							id: 4,
							icon: svgData.svgToUrl("order_4", state.app.themeColor),
							text: "已取消",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/order/index?state=cancelled",
								isToken: true,
							},
						},
					]
				},
				systemMenu: state => {
					return [{
							icon: svgData.svgToUrl("tool_wallet", state.app.themeColor),
							text: "我的钱包",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/wallet/index",
								isToken: true,
							},
						},
						{
							icon: svgData.svgToUrl("tool_passenger", state.app.themeColor),
							text: "常用乘车人",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/passenger/index",
								isToken: true,
							},
						},
						{
							icon: svgData.svgToUrl("tool_coupon", state.app.themeColor),
							text: "优惠卡券",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/coupon/index",
								isToken: true,
							},
						},
						{
							icon: svgData.svgToUrl("tool_invoice", state.app.themeColor),
							text: "发票申请",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/invoice/index",
								isToken: true,
							},
						},
						{
							icon: svgData.svgToUrl("tool_help", state.app.themeColor),
							text: "帮助中心",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/help/index",
							},
						},
						{
							icon: svgData.svgToUrl("tool_contact", state.app.themeColor),
							text: "平台客服",
							info: "contact",
						},
						{
							icon: svgData.svgToUrl("tool_settings", state.app.themeColor),
							text: "系统设置",
							info: {
								mode: 1,
								path: "/pages/passenger/mine/settings/system",
							},
						},
					]
				}
			})
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop
			if (scrollTop > 100) {
				this.titleBackground = "#fff"
			} else {
				let opacity = parseFloat(scrollTop / 100).toFixed(4)
				this.titleBackground = "rgba(255, 255, 255, " + opacity + ")"
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			wx.hideHomeButton();
			// #endif
			if (uni.getStorageSync("token")) {
				this.getUserInfo()
			}
		},
		onPullDownRefresh() {
			if (uni.getStorageSync("token")) {
				this.getUserInfo(() => {
					uni.stopPullDownRefresh()
				})
			} else {
				uni.stopPullDownRefresh()
			}
		},
		onShareAppMessage() {
			return {
				title: this.shareTitle,
				imageUrl: this.shareImage,
			}
		},
		onShareTimeline() {
			return {
				title: this.shareTitle,
				imageUrl: this.shareImage,
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo(fn) {
				this.$util.request("passenger.user").then(res => {
					if (fn) fn()
					if (res.code == 1) {
						uni.setStorageSync("userInfo", res.data)
						this.$store.commit('user/setUserInfo', res.data)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					if (fn) fn()
					console.error('获取用户信息 ', error)
				})
			},
			// 跳转代驾端
			toDriverModule() {
				if (!this.$util.verifyLogin()) return
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.$util.request("driver.user").then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.setStorageSync("driverInfo", res.data)
						this.$store.commit('user/setDriverInfo', res.data)
						if (res.data.certification_examine_status == 2) {
							this.$util.toPage({
								mode: 3,
								path: "/pages/driver/index/index",
								isToken: true,
							})
						} else {
							this.$util.toPage({
								mode: 1,
								path: "/pages/driver/mine/authentication/index",
								isToken: true,
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.error('获取司机认证状态 ', error)
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;

		.container-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 534rpx;
			background: linear-gradient(180deg, var(--theme-color) -100%, rgba(173, 211, 255, 0.00) 100%);
		}

		.container-main {
			position: relative;
			z-index: 1;
			padding: 0 32rpx 32rpx;

			.main-column {
				border-radius: 32rpx;
				background: #FFF;
				padding: 32rpx;
				margin-top: 32rpx;

				.column-title {
					color: #242629;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
				}
			}

			.main-switch {
				border-radius: 32rpx;
				background: var(--theme-color);
				padding: 18rpx 32rpx;
				margin-top: 32rpx;
				position: relative;

				.switch-bg {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}

				.switch-title {
					position: relative;
					z-index: 1;
					color: #FFF;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					text-align: center;
				}

				.switch-subtitle {
					position: relative;
					z-index: 1;
					margin-top: 8rpx;
					color: #FFF;
					font-size: 20rpx;
					line-height: 28rpx;
					text-align: center;
				}
			}

			.main-statement {
				font-size: 24rpx;
				line-height: 34rpx;
				color: #8D929C;
				margin-top: 48rpx;
				text-align: center;
			}
		}
	}
</style>